<template>
  <div class="about">
    <van-nav-bar title="购物车" placeholder fixed>
      <template #left>
        <van-icon name="shop-collect" size="18" @click="gotoback" />商品
      </template>
      <template #right>
        清空<van-icon name="delete" size="18" @click="clearcart" />
      </template>
    </van-nav-bar>
    <AppleTable :cart="cart"></AppleTable>
    <div class="lists" v-for="(item, index) in cartlist" :key="index">
      <van-checkbox v-model="checked">
        <van-swipe-cell class="carts">
          <van-card
            :num="item.number"
            :price="item.price"
            :desc="item.goods_name"
            :title="item.goods_name"
            class="goods-card"
            :thumb="url + item.goods_img"
          />
          <template #right>
            <van-button
              square
              text="找相似"
              type="danger"
              class="delete-button"
              color="#f76901"
            />
            <van-button
              square
              text="移入收藏夹"
              type="danger"
              class="delete-button"
              color="#f3d187"
            />
            <van-button
              @click="delcart(item.id)"
              square
              icon="delete-o"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </div>
    <div style="height: 10vh"></div>
    <div class="cont">
      <van-checkbox v-model="checked">
        <div class="count">
          <div class="ones">全选</div>
          <div>
            <div class="twos">￥{{money}}</div>
            <div class="btns">结算</div>
          </div>
        </div>
      </van-checkbox>
    </div>
  </div>
</template>

<script>
import AppleTable from "../components/HomeView/AppleTabar.vue";
export default {
  components: {
    AppleTable,
  },
  computed:{
    money(){
      let sum = 0
      this.cartlist.map((v)=>{
        sum += v.price*1
      })
      return sum  
    }
  },
  data() {
    return {
      cart: true,
      cartlist: [],
      checked: true,
      checkeds: false,
      url: "https://img.9lele.com",
    };
  },
  methods: {
    gotoback() {
      this.$router.go(-1);
    },
    clearcart() {
      this.$dialog
        .confirm({
          title: "清空购物车",
          message: "是否全部清空",
          confirmButtonColor: "red",
        })
        .then(() => {
          console.log("点击了确认");
          let id = JSON.parse(localStorage.getItem("user"));
          this.$store.dispatch("apple/ClearCart", id.member_id).then((e) => {
            // this.cartlist = e.data.data;
            console.log(e);
            this.getcartlist();
          });
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },

    delcart(id) {
      this.$store.dispatch("apple/DelCart", id).then((e) => {
        console.log(e);
        this.getcartlist();
      });
    },
    getcartlist() {
      let id = JSON.parse(localStorage.getItem("user"));
      this.$store.dispatch("apple/CartList", id.member_id).then((e) => {
        this.cartlist = e.data.data;
        console.log(this.cartlist);
      });
    },
  },
  created() {
    this.getcartlist();
  },
};
</script>
<style scoped>
.count {
  width: 320px;
  display: flex;
  justify-content: space-between;
}
.ones{
  width: 50px;
  height: 30px;
  margin-top: 15px;
  /* line-height: 30px; */
}
.twos{
  float: left;
  width:100px;
  height: 30px;
  margin-top: 15px;
}
.btns{
  width: 60px;
  height:30px;
  margin-top: 10px;
  background-color: black;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 3px;
  /* padding-left: 20px; */
  float: right;
}
.goods-card {
  margin: 0;
  /* background-color: #f2f2f2; */
}

.delete-button {
  height: 100%;
  
}
.lists {
  width: 100%;
  height: 16vh;
  margin-top: 2vh;
  /* background-color: #f2f2f2; */
  border-radius: 10px;
}
.carts {
  width: 93vw;
  height: 100%;
  border-radius: 10px;
  text-align: left;
}
.cont {
  width: 96%;
  margin-left: 2%;
  height: 50px;
  border-radius: 10px;
  background-color: #f2f2f2;
  position: fixed;
  bottom: 60px;
  /* z-index: 99; */
}

.delete-button {
  width: 30px;
}
/* .title{

} */
</style>